<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="./ji.jpg" alt="">

    <script>
        let box = document.querySelector("img")
        let moveX = 0
        let moveY = 0
        let startX = 0
        let startY = 0
        let stopX = 0
        let stopY = 0

        //记录触摸球的开始坐标
        box.addEventListener("touchstart",function(event){
            startX = event.touches[0].pageX;
            startY = event.touches[0].pageY;
        })


        box.addEventListener("touchmove",function(b){
            console.log(b.touches[0].clientX);
            //当前小球停留的坐标 + 手指移动的坐标 - 小球刚开始触摸的坐标 = 所移动的值
            moveX = stopX + b.touches[0].pageX - startX
            moveY = stopY + b.touches[0].pageY - startY
            box.style = `transform:translate(${moveX}px,${moveY}px)`
        })


        //球停止移动的时候的位置
        box.addEventListener("touchend",function(event){
            //保留移动之后的值
            stopX = moveX
            stopY = moveY
        })
    </script>
</body>
</html>